/*
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-10-23 21:11:22
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-10-27 08:39:25
 * @FilePath: \宏烨找房\user\demo\src\page\buyHouse\index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React ,{ useEffect , useState} from 'react'
import { ArrowLeft, Ellipsis } from '@react-vant/icons';
import { Card, Tag,  } from 'react-vant'

import { useNavigate } from 'react-router-dom'
import { httpInformation } from '../../api/information'//热门资讯

import './index.css'
 const Information=()=> {
   const navigate = useNavigate()

   const [housing, setHousing] = useState([]);// 获取热门资讯
   useEffect(() => {
     fetch_data();// 获取热门资讯
   }, [])

   // 获取热门资讯
   const fetch_data = async () => {
     const res = await httpInformation('/information');
     setHousing(res.data.results);
     console.log(res, 'll')
   }
   // 返回登录页面
   const back = () => {
     navigate('/layout/home')
   }
  return (
    <div className='box'>
     <div className="top-box">
        <div className='top'>
          <ArrowLeft onClick={() => back()} />
          <b>资讯频道</b>
          <Ellipsis />
        </div>
     </div>

    <div className="content">
        {/* 城市资讯 */}
        <div className="building">
          <div>
            {
              housing && housing.map((item, index) => {
                return (
                  <dl className='housingDl' key={index}>
                    <dt>
                      <img src={item.img} alt="" style={{ width: '130px', height: '80px' }} />
                    </dt>
                    <dd>
                      <b style={{ padding: '10px' }}>{item.title}  </b> <br />
                    </dd>
                  </dl>
                )
              })
            }
          </div>
        </div>
    </div>
    </div>
  )
}
export default Information;